<template>
	<!-- 维保管理/电梯绑定-->
	<div class="heightMax order publicbox" v-loading='loading'>
		<div class="header">
			<el-row :gutter="10">
				<el-col :span="4">
					<el-input size="mini" @keyup.enter.native="find" placeholder="请按照关键词查找" clearable v-model="query"></el-input>
				</el-col>

				<el-col :span="4">
					<el-select size="mini" placeholder="备案状态" clearable v-model="recordStatus">
						<el-option v-for="item in recordArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-search" @click='find' size="mini">搜索</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button icon="el-icon-delete" @click='reset' size="mini">重置</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="1.5">
					<!-- v-if="role != 0" -->
					<el-button type="primary" :disabled="disableBtn " @click='operation(2)' v-if="complieBtnShow" size="mini">编辑</el-button>
				</el-col>
				<!-- <el-col :span="1.5">
					<el-button type="danger" :disabled="disableBtn   " @click='deleteList(1)' v-if="role == 0">删除</el-button>
				</el-col> -->
				<el-col :span="1.5">
					<el-button type="success" :disabled="disableBtn" @click='operation(3)' v-if="readDataShow" size="mini">详情</el-button>
				</el-col>
				<!-- <el-col :span="1.5">
					<el-button type="danger" :disabled="batchDisable" @click='deleteList(2)' v-if="role == 0">批量删除</el-button>
				</el-col> -->
				<!-- <el-button type="success" class='fr' @click='operation(1)' v-if="role != 0">添加</el-button>
				<el-button type="primary" class='fr' @click='educe' v-if="role != 0">导出</el-button>
				<el-button type="primary" class='fr' @click="dialogVisible = true" v-if="role != 0">导入</el-button> -->
			</el-row>
		</div>
		<!-- 导入 -->
		<div class="goLeadBox">
			<el-dialog custom-class="intoDialog" :append-to-body='true' title="请上传模板文件" :visible.sync="dialogVisible" width="450px"
			 :close-on-click-modal="false">
				<div style="height:110px;z-index: 3333;" class="upModelBox">
					<el-upload action="" list-type="text" :file-list="fileList" :auto-upload="false" name="task">
						<el-button size="mini" type="primary">点击上传</el-button>
						<a href="http://www.africle.xyz:8088/uploaded/电梯.csv" target="_blank">
							<div slot="tip" class="moban">点击下载模板</div>
						</a>
						<div slot="tip" style="margin-top: 20px;font-size: 14px;">只能上传一份XLSX文件</div>
					</el-upload>
				</div>
				<span slot="footer">
					<el-button @click="callOff">取消</el-button>
					<el-button type="primary" @click='submit' v-loading='upBtnLoading'>确定</el-button>
				</span>
			</el-dialog>
		</div>
		<!-- 表格 -->
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" min-width="50" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="绑定状态">
						<template slot-scope="scope" class="degb">
							<div slot="reference" class="name-wrapper">
								<el-badge :value="scope.row.registry_status_icon" class="item" :type="scope.row.registry_status_type">
									<el-tag size="medium">{{ scope.row.registry_status_name}}</el-tag>
								</el-badge>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="使用单位">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
								<span class="speSpan">{{scope.row.property_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="电梯注册代码">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
								<span class="speSpan">{{scope.row.register_code}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="电梯简称">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.elevator_name" placement="top">
								<span class="speSpan">{{scope.row.elevator_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="最后更新人">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.update_by_people" placement="top">
								<span class="speSpan">{{scope.row.update_by_people}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="最后更新时间">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.update_time" placement="top">
								<span class="speSpan">{{scope.row.update_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<transition name='el-fade-in'>
			<addAndCompile v-if='addAndCompileShow' :isAddOrComp='isAddOrComp' :addAndCompileShow='addAndCompileShow'
			 @detailMaskShow='detailMaskShow' :rowId='rowId'></addAndCompile>
		</transition>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	import addAndCompile from "./addAndCompile"
	export default {
		mounted() {
			this.getTableList()
			this.getPermition()
		},
		components: {
			addAndCompile
		},
		data() {
			return {
				total: 10,
				page: 1,
				page_size: 10,
				query: '',
				registry_status: '',
				recordStatus: '',
				mainCompany: '',
				loading: true,
				recordArr: [{
						label: "尚未备案",
						value: 10
					},
					{
						label: "备案成功",
						value: 20
					},
					{
						label: "备案失败",
						value: 30
					},
				],
				tableData: [],
				fileList: [],
				companyUnitArr: [],
				dialogVisible: false,
				disableBtn: true,
				batchDisable: true,
				//弹窗
				detailShow: false,
				addAndCompileShow: false,
				isAddOrComp: 1,
				deleteArr: [],
				complieBtn: true,
				rowId: '',
				upBtnLoading: false,
				order_by: '-create_time',
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
			bangDingArr() {
				if (localStorage.baoYang) {
					let arr = JSON.parse(localStorage.baoYang).list
					return arr.filter((item) => {
						return item.name == '电梯绑定'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			getPermition() {
				if (this.bangDingArr.length != 0) {
					if (this.bangDingArr[0].pids) {
						this.pidsArr = this.bangDingArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			//获取表格数据
			getTableList() {
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.query,
					is_binded: this.recordStatus
				}
				axiosGet('/basic/bind/', params, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.is_binded == 10) {
								item.registry_status_type = "warning"
								item.registry_status_name = "尚未备案"
								item.registry_status_icon = "?"
							} else if (item.is_binded == 20) {
								item.registry_status_type = "success"
								item.registry_status_name = "备案成功"
								item.registry_status_icon = "✔"
							} else {
								item.registry_status_type = "danger"
								item.registry_status_name = "备案失败"
								item.registry_status_icon = "X"
							}
							return item
						})
					} else {
						this.$message({
							type: 'error',
							message: res.detail.result
						})
					}
					this.loading = false
				})
			},
			//维保单位过滤
			mainPub(params) {
				axiosGet('/user/company/?company_type=100', params, (res) => {
					if (res.code == 0) {
						this.companyUnitArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getMainUnit() {
				let params = {
					page_size_count: 30
				}
				this.mainPub(params)
			},
			//维保远程搜索
			findMainUnit(query) {
				let params = {
					page_size_count: 30,
					key_words: query
				}
				this.mainPub(params)
			},
			//行选中
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			//选中多行
			selectChange(res) {
				console.log(res)
				if (res.length == 0) {
					this.disableBtn = true
					this.batchDisable = true
				} else {
					if (res.length == 1) {
						this.disableBtn = false
						this.batchDisable = true
						this.rowId = res[0].id
					} else {
						this.disableBtn = true
						this.batchDisable = false
					}
				}
				this.deleteArr = res
			},
			//搜索
			find() {
				this.loading = true
				this.page = 1
				this.page_size_count = 10
				this.getTableList()
			},
			//重新加载
			reset() {
				this.loading = true
				this.page = 1
				this.page_size_count = 10
				this.query = ''
				this.registry_status = ''
				this.mainCompany = ''
				this.recordStatus = ''
				this.getTableList()
			},
			//分页器数量变化
			handleSizeChange(currentSize) {
				this.loading = true
				this.page_size = currentSize
				this.getTableList()
			},
			//分页器页数变化
			handleCurrentChange(currentPage) {
				this.loading = true
				this.page = currentPage
				this.getTableList()
			},
			//导出
			educe() {
				this.$confirm('此操作将导出全部电梯绑定信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					loadFn()
					let data = {
						request_type: "elevator"
					}
					axiosPost('/user/download/', data, (res) => {
						console.log(res)
						AllLoading.close()
						if (res.code == 0) {
							window.location.href = res.detail
						} else {
							this.$message.error(res.detail.result);
						}
					})
				}).catch(() => {});
			},
			//导入
			//导入清空
			leadPub() {
				this.upBtnLoading = false
				this.dialogVisible = false
				this.fileList = []
			},
			submit() {
				if (this.fileList.length != 0) {
					this.upBtnLoading = true
					const formData = new FormData();
					formData.append('elevator', this.fileList[0].raw);
					axiosPost('user/upload/', formData, (res) => {
						this.leadPub()
						if (res.code == 0) {
							this.$message({
								type: "success",
								message: '上传成功',
							})
						} else if (res.code != 40500) {
							this.$message({
								type: "error",
								message: "第" + res.detail.line + "行/" + "第" + res.detail.column + "列出错:" + res.detail.msg
							})
						} else {
							this.$message.error(res.detail.result)
						}
					})
				} else {
					this.$message.error("请上传文件!")
				}
			},
			callOff() {
				this.leadPub()
			},
			//查看详情
			lookDetail() {
				this.detailShow = true
			},
			//详情关闭
			maskShowNow(isShow) {
				this.detailShow = isShow
			},
			//编辑/添加 关闭
			detailMaskShow(isShow) {
				this.addAndCompileShow = false
				if (isShow == 1) {
					this.loading = true
					this.getTableList()
				}
			},
			//添加打开弹窗
			operation(value) {
				this.addAndCompileShow = true
				this.isAddOrComp = value
			},
			//删除
			//单删除
			oneDelete() {
				let url = '/basic/elevator/' + this.rowId + '/'
				axiosDelete(url, {}, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '删除成功'
						})
						this.loading = true
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//多删除
			allDelete() {
				let newdeleteArr = this.deleteArr.map(item => {
					return item.id
				})
				let data = {
					ele_ids: newdeleteArr
				}
				axiosDelete('/basic/elevator/', data, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '删除成功'
						})
						this.loading = true
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			deleteList(value) {
				this.$confirm('此操作将永久删除合同, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (value == 1) {
						this.oneDelete()
					} else {
						this.allDelete()
					}
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="less" scoped>
	.pag {
		margin-top: 10px;
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.ball {
		width: 21px;
		height: 21px;
		border-radius: 50%;
		margin: 0 auto;
	}
</style>
